<template>
<!--
  知识点：
  1.parallax.js鼠标随动效果组件。
  2.全局css样式的使用
 -->
  <div id="app">

    <div class="background-wrap">
      <ul id="scene" ref="scene"><!-- 鼠标随动效果组件,详见readme.md文件里的使用说明,以及b站里css收藏夹里的视频 -->
        <li class="green-planet" data-depth="-4.0"><img src="@/assets/image/background/planet2_green.png"></li>
        <li data-depth="-6.0"><img src="@/assets/image/background/planet3_red.png"></li>
        <li data-depth="0.3"><img src="@/assets/image/background/planet1_purple.png"></li>
        <li class="big-planet"><img src="@/assets/image/background/big_planet.png"></li>
        <li><img src="@/assets/image/background/small_planet.png"></li>
        <li data-depth="-0.4"><img src="@/assets/image/background/astronaut.png"></li>
        <li data-depth="3.3"><img src="@/assets/image/background/satellite.png"></li>
      </ul>
    </div>
    
    <div class="main-wrap">
      <router-view/>
    </div>

  </div>
</template>

<script>
  export default {
    data(){
      return{

      }
    },
    mounted(){
      //鼠标随动效果组件,详见readme.md文件里的使用说明,以及b站里css收藏夹里的视频
      var parallaxInstance = new Parallax(this.$refs.scene);
    }
  }
</script>

<style>
  /* 引入全局样式 */
  @import "~@/assets/css/reset.css";
  /*
  上面的引入也可以写成
  @import url(~@/assets/css/reset.css);

  如果在html标签里使用，则不需要~,如下
   <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
  */



  /* 自定义鼠标光标外观 (建议使用*来匹配选择器，这样所有位置的光标外观都会生效) */
  /* 
  *{
    cursor: url("~@/assets/image/mouse/rocket_48.png"),default;
  } 
  */
  html,body{
    cursor: url("~@/assets/image/mouse/rocket_48.png"),default !important;
  }
  /*
  参考文章：
  https://www.webhek.com/post/css-custom-cursors.html
  https://blog.csdn.net/weixin_33565515/article/details/112774599
  https://blog.csdn.net/qmdweb/article/details/80483612
  https://blog.csdn.net/weixin_44230635/article/details/88963187
  http://www.jquerycn.cn/a_33204
  */
</style>

<style scoped>
  .background-wrap{
    /* 以下属性作用：
        1.使背景图在不变形的前提下，填充满整个屏幕。
        2.background-attachment:fixed属性保证在页面上下滚动的时候，背景图不会跟随滚动。

        参考文章：https://www.cnblogs.com/dee0912/p/3983662.html
    */
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image: url("~@/assets/image/background/background.jpg");
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
    -o-background-size: cover;/* 兼容Opera */
    zoom: 1;

    /* 让子元素里的图片超出范围后，不会出现滚动条 */
    overflow: hidden;
  }



  /* 以下设置，让每个随动元素图片，跟随浏览器窗口的缩放，而放大缩小(如果注释掉，会按照图片原尺寸显示) */
  li{
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }
  li>img{
      position: absolute;
      width: 100%;
  }



  /*
  以下设置，让作为背景的大星球实现“沉底”的效果，浏览器如何缩放，它都会紧贴底部。
  ps：前提是使用了上面的“随动元素跟随浏览器窗口缩放而缩放”的设置
    */
  .big-planet{
      position: relative; /* 该属性让它做为它内部子元素定位参照物 */
  }
  .big-planet>img{
      position: absolute !important; /* 以它的父级元素作为定位参照物 */
      bottom: 0 !important; /* 底部距离为0,形成沉底效果 */
      max-height: 85vh !important; /* 设置图片(作为背景的最大星球)的最大高度，避免全屏的时候高度太高而不美观 */
  }





  /* 
  以下设置,让绿色星球的初始位置贴近屏幕底部(这里用了vh,视口百分比高度),目的是让绿色星球藏在背景大星球的后面.
  ps:藏在背后的实现是让元素位置重叠,这里parallax.jx是通过li元素的先后顺序实现层叠级别的(元素越晚渲染,重叠越表层).
    */
  .green-planet{
      position: relative;
  }
  .green-planet>img{
      position: absolute !important;
      bottom: 2vh;
  }


  /* 主体内容区域容器 */
  .main-wrap{

     /* 让总体容器根据浏览器视口定位，不受随动背景的影响 */
    position: fixed;
    /**
    注意！！！：
    只有fixed和absolute 可以配合left/right/top/bottom 来撑开空间，relative是不行的！！！
     */

    /* 撑开div的空间,填充整个页面 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    /* 
    X轴(横向)固定最小宽度，浏览器横向压缩后，超出区域用滚动条。
    Y轴(纵向)浏览器纵向压缩后，超出区域隐藏。
     */
    overflow-x: auto;
    overflow-y: hidden;
  }

</style>
